window.onload = function () {
    //1.初始化画布
    //2.绘制一定数量的小点
    //3.让小点动起来：新画一个，把旧的删除，模拟运动
    //4.设置浏览器边界值，防止小点跑出去
    //5.用勾股定理判断两点之间是否连线


    //命名空间：基于对象的基础 {}
    var Canvas = {};

    //动画
    Canvas.anim = {
        //初始化
        init: function () {
            var canvas = document.getElementById('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            this.cxt = canvas.getContext('2d');

            this.num = 350;
            this.wW = canvas.width;
            this.wH = canvas.height;
            this.data = [];

            for(var i=0;i<this.num;i++){
                this.data[i] = {
                    x:Math.random()*this.wW,
                    y:Math.random()*this.wH,
                    cX:Math.random()*0.6 - 0.3,
                    cY:Math.random()*0.6 - 0.3,
                };
                this.drawCircle(this.data[i].x,this.data[i].y);
            }
        },
        //绘制一定数量的小点
        drawCircle: function (x,y) {
            var cxt = this.cxt;
            cxt.save();
            cxt.fillStyle = 'pink';
            cxt.beginPath();  //开始路径
            cxt.arc(x, y, 1, 0, Math.PI * 2, false);
            cxt.closePath();  //关闭路径
            cxt.fill();
            cxt.restore();
        },
        //小点运动以及连线（条件是三个点之间是否构成直角三角形，勾股定理）
        moveCircle:function(){
            this.cxt.clearRect(0,0,this.wW,this.wH);  //清除画布
            for(var i=0;i<this.num;i++){
                this.data[i].x += this.data[i].cX;
                this.data[i].y += this.data[i].cY;

                //边界判断
                if(this.data[i].x > this.wW || this.data[i].x < 0){
                    this.data[i].cX = - this.data[i].cX;
                }
                if(this.data[i].y > this.wH || this.data[i].y < 0){
                    this.data[i].cY = - this.data[i].cY;
                }

                this.drawCircle(this.data[i].x,this.data[i].y);

                //用勾股定理判断是否连线
                for(var j=i+1;j<this.num;j++){  //下一个点
                    if((this.data[i].x - this.data[j].x) * (this.data[i].x - this.data[j].x) +
                        (this.data[i].y - this.data[j].y) * (this.data[i].y - this.data[j].y) <= 50*50){
                        // console.log(1);
                        this.liner(
                            this.data[i].x,this.data[i].y,
                            this.data[j].x,this.data[j].y
                        );
                    }
                }
            }
        },
        //绘制线条
        liner:function(x1,y1,x2,y2){
            var cxt = this.cxt;
            //渐变色
            var color = cxt.createLinearGradient(x1,y1,x2,y2);
            color.addColorStop(0,'#444');
            color.addColorStop(1,'#111');
            cxt.save();
            cxt.strokeStyle = color;
            cxt.beginPath();  //开始路径
            cxt.moveTo(x1,y1);
            cxt.lineTo(x2,y2);
            cxt.closePath();  //关闭路径
            cxt.stroke();
            cxt.restore();
        },

    };

    Canvas.anim.init();
    setInterval(function(){
        Canvas.anim.moveCircle();
    },10)

};
